<template>
  <div>
   <el-table
    :data="list"
    style="width: 100%"
        :header-cell-style="{
        background: '#FAFAFA',
        color: '#909399',
        borderBottom: '2px solid #e8e8e8',
      }"
    :border="false"
    max-height="700"

  >
    <el-table-column prop="number" label="试题编号" width="150">
    </el-table-column>
    <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
    <el-table-column prop="catalog" label="目录" width="120"> </el-table-column>
    <el-table-column
      prop="questionType"
      :formatter="questionstype"
      label="题型"
      width="120"
    >
    </el-table-column>
    <el-table-column
      prop="question"
      :formatter="formatterquestions"
      label="题干"
      width="280"
    >
    </el-table-column>
    <el-table-column prop="addDate" label="录入时间" width="180">
      <template slot-scope="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      :formatter="formatterdifficulty"
      label="难度"
      width="120"
    >
    </el-table-column>
    <el-table-column prop="creator" label="录入人" width="120">
    </el-table-column>
    <el-table-column label="操作" width="200px" fixed="right">
      <template slot-scope="scope">
        <!-- 预览 -->
        <el-button
          type="primary"
          icon="el-icon-view"
          plain
          circle
          @click="look(scope.row)"
        ></el-button>
        <!-- 修改 -->
        <el-button
          @click="change(scope.row)"
          type="success"
          plain
          circle
          icon="el-icon-edit"
        ></el-button>
        <!-- 删除 -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          plain
          circle
          @click="del(scope.row)"
        ></el-button>
        <!-- 加入精选 -->
        <el-button
          type="warning"
          icon="el-icon-check"
          plain
          circle
          @click="add(scope.row)"
        ></el-button>
      </template>
    </el-table-column>

  </el-table>
  <choicePreview :isShowMyDialog.sync="isShowMyDialog" :viewData="viewData"></choicePreview>
  </div>
</template>

<script>
import { remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { html2Text } from '@/utils/index.js'

import * as constants from '@/api/hmmm/constants'
// 预览组件
import choicePreview from '../choice-preview.vue'
export default {
  name: 'questionList',
  components: { choicePreview },
  props: {
    // 列表数据
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      //   弹层组件显示隐藏
      isShowMyDialog: false,
      viewData: {}
    }
  },

  mounted () {},
  created () {
    this.$parent.getList()
  },
  methods: {
    // 题型过滤
    questionstype (row, column, cellValue, index) {
      const res = constants.questionType.find(
        (item) => item.value == cellValue
      )
      return res?.label ? res.label : '未知'
    },
    //  难度过滤
    formatterdifficulty (row, column, cellValue, index) {
      const res = constants.difficulty.find((item) => item.value == cellValue)
      return res?.label ? res.label : '未知'
    },
    // 格式化内容
    formatterquestions (row, column, cellValue, index) {
      return html2Text(cellValue)
    },

    // 修改
    change (row) {
      // console.log(row);
      this.$router.push('new' + `?id=${row.id}`)
    },
    //  预览
    async look (row) {
      // 获取详情
      const { data } = await detail({ id: row.id })
      // console.log(data);
      this.viewData = data
      this.isShowMyDialog = true
    },

    // 删除
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.$parent.getList()
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 加入精选
    async add (row) {
      // console.log(row);
      try {
        await this.$confirm('此操作将加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        this.$message({
          type: 'success',
          message: '加入精选成功'
        })
        this.$parent.getList()
      } catch (error) {
        // this.$message({
        //   type: "error",
        //   message: error,
        // });
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
